import React, { Component } from 'react'
import { findDOMNode } from 'react-dom';
import { message, Space, Modal } from 'antd'
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { connect } from 'umi'
import './tagsSelect.less'
@connect(({ music }) => ({
    music,
    ResetTags: music.ResetTags
}))
class TagsAdd extends Component {

    constructor(props) {
        super(props);
    }

    state = {
        isShow: false,
        curItem: []
    }
    componentWillMount() {
        const { dispatch, ResetTags } = this.props;
        if (ResetTags.length <= 0) {
            dispatch({
                type: 'music/getClassifyTags'
            })
        }
    }
    componentDidMount() {
        const { initTags } = this.props;
        let newArr = [];
        initTags.map((item, index) => {
            newArr.push(item);
        })
        this.setState({
            curItem: newArr
        })
    }

    setShow = (bool) => {
        this.setState({
            isShow: bool
        })
    }

    handleOk = () => {
        const { callback } = this.props;
        const { curItem } = this.state;
        this.setShow(false)
        callback(curItem);
    }

    handleChoiceTag = (e, item, pull) => {
        const { curItem } = this.state;
        let newArr = curItem;
        if (pull == 'pull') {
            let index = newArr.indexOf(item.id + "");
            newArr.splice(index, 1);

            e.target.setAttribute('data-active', false);
            e.target.className = 'ant-btn'
        } else {
            if (newArr.length >= 3) {
                return message.warning('最多选三个')
            }
            e.target.setAttribute('data-active', true);
            e.target.className = 'ant-btn active'
            newArr.push(item.id + "")
        }
        this.setState({
            curItem: newArr
        })
    }


    render() {
        const { ResetTags, initTags } = this.props;
        const { isShow } = this.state;
        return (
            <>
                <a onClick={() => this.setShow(true)}>编辑</a>
                <Modal title="添加标签"
                    visible={isShow}
                    onOk={this.handleOk}
                    onCancel={() => this.setShow(false)}
                >
                    <div className="tags-select-add">
                        {
                            ResetTags.length > 0 && ResetTags.map((item, index) => {
                                return <div className="tags-select-wrap" key={index}>
                                    <div className="tags-select-t">
                                        <h3>{item.name}</h3>
                                    </div>
                                    <div className="tags-select-b">
                                        <Space wrap>
                                            {
                                                item.tags && item.tags.map((jtem, jndex) => {
                                                    let active = false;
                                                    if (initTags.indexOf(jndex + "") >= 0) {
                                                        active = true;
                                                    }
                                                    return <button key={jndex}
                                                        className={`ant-btn ${active ? "active" : ""}`}
                                                        data-active={active}
                                                        onClick={(e) => {
                                                            let bool = e.target.getAttribute('data-active');
                                                            if (bool == 'true') {
                                                                this.handleChoiceTag(e, jtem, 'pull');
                                                            } else if (bool == 'false') {
                                                                this.handleChoiceTag(e, jtem);
                                                            }
                                                        }}>{jtem.name}</button>
                                                })
                                            }
                                        </Space>
                                    </div>
                                </div>
                            })
                        }
                    </div>
                </Modal>
            </>
        );
    }
}

export default TagsAdd